<template>
  <div class="home">
    <!-- 顶部通栏 -->
    <el-collapse-transition>
      <el-header v-show="show3">
        <img src="@/assets/images/logo.png" alt class="logo-img">
        <el-menu
          :default-active="activeIndex2"
          class="el-menu-demo"
          mode="horizontal"
          :background-color="bgc"
          text-color="#fff"
          active-text-color="#ffd04b"
          @dblclick.native="show3=false"
        >
          <colorPicker v-model="bgc" defaultColor="#545c64"/>
          <div class="login_in_out fr">
            <div class="lineline"></div>
            <span class="tittle">公众号管理后台</span>
            <a href="#" @click.prevent="handAdminMessage">{{ this.managerNickName }}</a>
            <i class="logout-img"></i>
            <a href="#" @click="handleLogout">退出</a>
          </div>
        </el-menu>
      </el-header>
    </el-collapse-transition>
    <!-- 侧边栏 -->
    <el-aside width="200px" class="heigth-100 fl sidebar">
      <div id="sidebar" class="height-100">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo height-100"
          :background-color="bgc"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-menu-item index="1" @click="handleIndex">
            <i class="el-icon-menu"></i>
            <span slot="title">主页</span>
          </el-menu-item>
          <el-submenu index="2" v-if="tkglym">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>题库管理页面</span>
            </template>
            <el-menu-item-group>
              <template slot="title">题库管理</template>
              <el-menu-item index="2-1" @click="HandlingExercises" v-if="xtlb">习题列表</el-menu-item>
              <el-menu-item index="2-4" @click="handAddExercise" v-if="xzxt">新增习题</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- <el-submenu index="3" v-if="yhglym||yhxxzl||yhfjcz">
            <template slot="title">
              <i class="el-icon-edit-outline"></i>
              <span>用户管理页面</span>
            </template>
            <el-menu-item-group>
              <template slot="title">用户管理</template>
              <el-menu-item index="3-1" v-if="yhxxzl||yhglym" @click="handleUsers">用户信息整理</el-menu-item>
              <el-menu-item index="3-2" v-if="yhfjcz||yhglym">用户封禁操作</el-menu-item>
            </el-menu-item-group>
          </el-submenu>-->
          <el-submenu index="4" v-if="qxgl">
            <template slot="title">
              <i class="el-icon-view"></i>
              <span>用户与权限</span>
            </template>
            <el-menu-item-group>
              <template slot="title">权限管理</template>
              <el-menu-item index="4-1" @click="HandlingManagement" v-if="xjjsqxgl">角色权限管理</el-menu-item>
              <el-menu-item index="4-2" @click="HandlingPersonal" v-if="rryqxgl">用户角色配置</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="5" v-if="zdglym">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>字典管理页面</span>
            </template>
            <el-menu-item-group>
              <template slot="title">字典管理</template>
              <el-menu-item index="5-1" @click="handleDictionary" v-if="zdlb">字典列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="6" v-if="fkxxym">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>反馈信息页面</span>
            </template>
            <el-menu-item-group>
              <template slot="title">反馈信息</template>
              <el-menu-item index="6-1" @click="handleFeedback" v-if="tmfk">题目反馈</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="7" v-if="zlxxym">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>资料学习页面</span>
            </template>
            <el-menu-item-group>
              <template slot="title">资料管理</template>
              <el-menu-item index="7-1" @click="handleinformation" v-if="zlgl">资料管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="8" v-if="qyglym">
            <template slot="title">
              <i class="el-icon-setting"></i>
              <span>企业管理页面</span>
            </template>
            <el-menu-item-group>
              <template slot="title">企业管理</template>
              <el-menu-item index="8-1" @click="HandleEnterpriseList" v-if="qylb">企业列表</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
    </el-aside>
    <!-- 主界面 -->
    <el-main class="main height-100 of">
      <!--视图容器 -->
      <el-card class="box-card fr height-100 of">
        <router-view></router-view>
      </el-card>
    </el-main>
  </div>
</template>
<script>
import $$ from '@/plugins/statusCode.config'
export default {
  data () {
    return {
      show3: true,
      managerNickName: '',
      activeIndex2: '1',
      bgc: '#545c64',
      tkglym: false,
      xtlb: false,
      xzxt: false,
      yhglym: false,
      yhxxzl: false,
      yhfjcz: false,
      qxgl: false,
      xjjsqxgl: false,
      rryqxgl: false,
      zdglym: false,
      zdlb: false,
      fkxxym: false,
      tmfk: false,
      zlxxym: false,
      zlgl: false,
      qyglym: false,
      qylb: false
    }
  },
  created () {
    const token = sessionStorage.getItem('accessToken')
    if (!token) {
      this.$message.warning('请先登录')
      this.$router.push({ name: 'login' })
    }
    this.managerNickName =
      sessionStorage.getItem('managerNickName') ||
      sessionStorage.getItem('userName')
  },
  mounted () {
    this.initRole()
  },
  methods: {
    async initRole () {
      const that = this
      const managerId = sessionStorage.getItem('id')
      const param = new URLSearchParams()
      param.append('managerId', managerId)
      await this.$http8081
        .post(
          '/authorization-search/queryAuthorizationAndRoleByManagerId',
          param
        )
        .then(function (res) {
          if (res.data.statusCode === $$.s20006) {
            const role = res.data.data.authorizationAlias
            let buttonRole = []
            for (let i = 0; i < role.length; i++) {
              buttonRole.push(role[i])
            }
            buttonRole = JSON.stringify(buttonRole)
            sessionStorage.setItem('buttonRole', buttonRole)
            that.role()
          }
        })
    },
    role () {
      let arr = JSON.parse(sessionStorage.getItem('buttonRole'))
      for (let i = 0; i < arr.length; i++) {
        if (arr[i] === 'tkglym') {
          this.tkglym = true
        }
        if (arr[i] === 'xtlb') {
          this.xtlb = true
        }
        if (arr[i] === 'xzxt') {
          this.xzxt = true
        }
        if (arr[i] === 'yhglym') {
          this.yhglym = true
        }
        if (arr[i] === 'yhxxzl') {
          this.yhxxzl = true
        }
        if (arr[i] === 'yhfjcz') {
          this.yhfjcz = true
        }
        if (arr[i] === 'qxgl') {
          this.qxgl = true
        }
        if (arr[i] === 'xjjsqxgl') {
          this.xjjsqxgl = true
        }
        if (arr[i] === 'rryqxgl') {
          this.rryqxgl = true
        }
        if (arr[i] === 'zdglym') {
          this.zdglym = true
        }
        if (arr[i] === 'zdlb') {
          this.zdlb = true
        }
        if (arr[i] === 'fkxxym') {
          this.fkxxym = true
        }
        if (arr[i] === 'tmfk') {
          this.tmfk = true
        }
        if (arr[i] === 'zlxxym') {
          this.zlxxym = true
        }
        if (arr[i] === 'zlgl') {
          this.zlgl = true
        }
        if (arr[i] === 'qyglym') {
          this.qyglym = true
        }
        if (arr[i] === 'qylb') {
          this.qylb = true
        }
      }
    },
    handleIndex () {
      this.$router.push({ name: 'index' })
    },
    handleUsers () {
      this.$router.push({ name: 'user' })
    },
    handleDictionary () {
      this.$router.push({ name: 'dictionary' })
    },
    handleLogin () {
      this.$router.push({ name: 'login' })
    },
    handleLogout () {
      sessionStorage.clear()
      this.$router.push({ name: 'login' })
      this.$message.success('退出成功')
    },
    HandlingExercises () {
      this.$router.push({ name: 'exerciseForm' })
      this.$message.success('进入习题列表')
    },
    handAddExercise () {
      this.$router.push({ name: 'addExercise' })
      this.$message.success('进入添加习题列表页面')
    },
    handAdminMessage () {
      this.$router.push({ name: 'adminMessage' })
      this.$message.success('进入到个人中心页面')
    },
    handleFeedback () {
      this.$router.push({ name: 'feedback' })
      this.$message.success('进入到题目反馈页面')
    },
    handleinformation () {
      this.$router.push({ name: 'information' })
      this.$message.success('进入到资料管理页面')
    },
    HandlingManagement () {
      this.$router.push({ name: 'role' })
      this.$message.success('进入到角色管理页面')
    },
    HandlingPersonal () {
      this.$router.push({ name: 'PersonnelAndManagement' })
      this.$message.success('进入到人员与权限管理页面')
    },
    HandleEnterpriseList () {
      this.$router.push({ name: 'HandleEnterpriseList' })
      this.$message.success('进入到查询企业列表')
    }
  }
}
</script>
<style>
.img052 {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 25px;
  right: 214px;
}
.m-colorPicker .colorBtn[data-v-11842410] {
  width: 22px;
  height: 22px;
  padding: 3px;
  border: 5px solid #ddd;
  border-radius: 8px;
}
.m-colorPicker[data-v-11842410] {
  position: absolute;
  top: 15px;
  text-align: left;
  font-size: 14px;
  display: inline-block;
  right: 205px;
}
.m-colorPicker .box.open[data-v-11842410] {
  visibility: visible;
  opacity: 1;
  z-index: 99999999999;
}
.text {
  font-size: 14px;
}
.sidebar {
  width: 250px;
  font-size: 16px;
}
.item {
  padding: 18px 0;
}

.box-card {
  width: 100%;
}
.logo-img {
  width: 250px;
  height: auto;
  position: absolute;
  left: 5px;
  top: 9px;
}
.heigth-100 {
  height: 100%;
}
.home {
  height: 100%;
}
/* .home .el-menu {
  overflow-x: hidden;
  border-right: solid 1px #e6e6e6;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
} */
.of {
  overflow: hidden;
}
.login_in_out {
  margin-right: 80px;
  padding-top: 20px;
  height: 40px;
}
.login_in_out a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
}
.el-submenu .el-menu-item {
  min-width: 198px;
}
.el-aside {
  border-radius: 5px;
  box-shadow: 2px 2px 2px #888888;
}
.home .el-header {
  padding: 0px 0px;
  height: 58px;
}
.el-icon-caret-bottom {
  color: #fff;
}
.tittle {
  position: absolute;
  top: 12px;
  left: 300px;
  font-size: 24px;
  color: aliceblue;
  font-family: '微软雅黑';
}
.lineline {
  position: absolute;
  top: 14px;
  left: 290px;
  width: 0px;
  height: 32px;
  border-left: 1px solid azure;
}
</style>
